<template>
    <div class="list">
        <Content titlt="美食">
            <!-- 在组件的标签内部书写的内容就是插入给组件内部的插槽内容 -->
            <template>
                <img src="http://www.atguigu.com/images/index_new/logo.png" alt="">
            </template>

            <!-- 如果在传入插槽结构的时候,没有使用v-slot,则当前结构默认寻找匿名插槽(默认插槽) -->
            <template v-slot:default>
                <div>
                    <p>美食1</p>
                    <p>美食2</p>
                    <p>美食3</p>
                </div>
            </template>
        </Content>

        <Content title="游戏">
        <!-- v-slot简写为# -->
        <template #content>
            <ul>
                <li>DNF1</li>
                <li>DNF2</li>
                <li>DNF3</li>
            </ul>
        </template>
        </Content>

        <Content title="电影">
        <template #content>
            <ol>
                <li>战狼1</li>
                <li>战狼2</li>
                <li>战狼3</li>
                <li>战狼4</li>
            </ol>
        </template>
        </Content>
    </div>
</template>

<script>
import Content from "./components/Content"
export default {
    name:"App",
    components:{
        Content
    },
    data() {
        return {};
    },
}
</script>

<style scoped>
.list {
  display: flex;
  justify-content: space-between;
}
</style>